<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Array--方法 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="1.Array1.join12var array = [1,2,3]array.join(&apos;-&apos;) // 1-2-3 猜测一下源码 12345678Array.prototype.join = function(char)&amp;#123;  let result = this[0] || &apos;&apos;;  let length = this.length;  for( let i = 1 ; i &amp;lt; l">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="Array--方法">
<meta property="og:url" content="https://storm4542.github.io/archives/b3afd273.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="1.Array1.join12var array = [1,2,3]array.join(&apos;-&apos;) // 1-2-3 猜测一下源码 12345678Array.prototype.join = function(char)&amp;#123;  let result = this[0] || &apos;&apos;;  let length = this.length;  for( let i = 1 ; i &amp;lt; l">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.159Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Array--方法">
<meta name="twitter:description" content="1.Array1.join12var array = [1,2,3]array.join(&apos;-&apos;) // 1-2-3 猜测一下源码 12345678Array.prototype.join = function(char)&amp;#123;  let result = this[0] || &apos;&apos;;  let length = this.length;  for( let i = 1 ; i &amp;lt; l">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-Array" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Array--方法
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="1-Array"><a href="#1-Array" class="headerlink" title="1.Array"></a>1.Array</h2><h4 id="1-join"><a href="#1-join" class="headerlink" title="1.join"></a>1.join</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line">array.join(<span class="string">'-'</span>) <span class="comment">// 1-2-3</span></span><br></pre></td></tr></table></figure>
<p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.join = <span class="function"><span class="keyword">function</span>(<span class="params">char</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="keyword">this</span>[<span class="number">0</span>] || <span class="string">''</span>;</span><br><span class="line">  <span class="keyword">let</span> length = <span class="keyword">this</span>.length;</span><br><span class="line">  <span class="keyword">for</span>( <span class="keyword">let</span> i = <span class="number">1</span> ; i &lt; length ; i++ )&#123;</span><br><span class="line">    result += char + <span class="keyword">this</span>[i]</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="2-slice"><a href="#2-slice" class="headerlink" title="2.slice"></a>2.slice</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">array.slice(benginIndex,endIndex)</span><br></pre></td></tr></table></figure>
<p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.slice = <span class="function"><span class="keyword">function</span>(<span class="params"> begin , end </span>)</span>&#123;</span><br><span class="line">  begin = begin || <span class="number">0</span> ;</span><br><span class="line">  end = end || <span class="keyword">this</span>.length;</span><br><span class="line">  <span class="keyword">let</span> result = [];</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = begin ; i &lt; end ; i++)&#123;</span><br><span class="line">    result.push(<span class="keyword">this</span>[i])</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>于是可以使用<code>slice</code>将伪数组转化为数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arraylike = <span class="string">'abcde'</span>;</span><br><span class="line"><span class="built_in">Array</span>.prototype.slice.call(arraylike) <span class="comment">//['a','b','c','d','e']</span></span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line">[].slice.call(....)</span><br></pre></td></tr></table></figure>
<p>ES6新方法 伪数组转化为数组</p>
<p><code>Array.from(arraylike)</code></p>
<p>P.S. 伪数组原型链里面没有 <code>Array.prototype</code>，所以他就没有 <code>join slice</code>等方法</p>
<h4 id="3-sort"><a href="#3-sort" class="headerlink" title="3.sort"></a>3.sort</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>,<span class="number">3</span>,<span class="number">2</span>]</span><br><span class="line">array.sort() <span class="comment">//[1,2,3]</span></span><br></pre></td></tr></table></figure>
<p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.sort = <span class="function"><span class="keyword">function</span> (<span class="params">fn</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> defaultfn = <span class="function">(<span class="params">a,b</span>)=&gt;</span>&#123; <span class="keyword">return</span> a-b &#125;</span><br><span class="line">    fn = fn|| defaultfn</span><br><span class="line">    <span class="keyword">var</span> roundcount = <span class="keyword">this</span>.length; <span class="comment">//比较的轮数</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; roundcount ; i++)&#123;</span><br><span class="line">          <span class="keyword">let</span> minIndex = <span class="keyword">this</span>[i]</span><br><span class="line">          <span class="keyword">for</span>( <span class="keyword">let</span> k = <span class="number">0</span> ; k &lt; <span class="keyword">this</span>.length ; k++)&#123;</span><br><span class="line">            <span class="keyword">if</span>(fn.call( <span class="literal">null</span> , <span class="keyword">this</span>[i] , <span class="keyword">this</span>[k]) &lt; <span class="number">0</span> )&#123;  <span class="comment">// 决定了谁大谁小</span></span><br><span class="line">              [ <span class="keyword">this</span>[i] , <span class="keyword">this</span>[k] ] = [ <span class="keyword">this</span>[k] , <span class="keyword">this</span>[i] ] <span class="comment">//es6新语法，交换值</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  	<span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h4 id="4-foreach"><a href="#4-foreach" class="headerlink" title="4.foreach"></a>4.foreach</h4><p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.foreach = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; <span class="keyword">this</span>.length ; i++)&#123;</span><br><span class="line">    <span class="keyword">if</span>(i <span class="keyword">in</span> <span class="keyword">this</span>)&#123;</span><br><span class="line">      fn.call(<span class="literal">undefined</span> , <span class="keyword">this</span>[i] , i , <span class="keyword">this</span>) <span class="comment">// 三个参数代表了 item index array</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>for 和 foreach 的区别</p>
<ol>
<li>foreach 没有 break </li>
</ol>
<ol start="2">
<li>forEach 用到了函数，所以每次迭代都会有一个新的函数作用域；for 循环只有一个作用域 (著名前端面试题)</li>
</ol>
</blockquote>
<h4 id="5-map"><a href="#5-map" class="headerlink" title="5.map"></a>5.map</h4><p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.map = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = []</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; <span class="keyword">this</span>.length ; i++)&#123;</span><br><span class="line">    <span class="keyword">if</span>(i <span class="keyword">in</span> <span class="keyword">this</span>)&#123;</span><br><span class="line">      result[i] = fn.call(<span class="literal">undefined</span> , <span class="keyword">this</span>[i] , i , <span class="keyword">this</span>) <span class="comment">// 三个参数代表了 item index array</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>map 和 foreach 的区别就是 map 有返回值，所以推荐<strong>忘记</strong> <strong>foreach</strong></p>
<h4 id="6-filter"><a href="#6-filter" class="headerlink" title="6.filter"></a>6.filter</h4><p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.filter = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = [];</span><br><span class="line">  <span class="keyword">let</span> temp;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; <span class="keyword">this</span>.length ; i++)&#123;</span><br><span class="line">    <span class="keyword">if</span>(temp = fn.call(<span class="literal">null</span> , <span class="keyword">this</span>[i] , i , <span class="keyword">this</span>))&#123;  <span class="comment">//如果temp的到的返回值为 true</span></span><br><span class="line">      	result.push(<span class="keyword">this</span>[i])</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>所以说 filter 就是一个加了条件的 map</strong> </p>
<h4 id="7-reduce"><a href="#7-reduce" class="headerlink" title="7.reduce"></a>7.reduce</h4><p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reduce = <span class="function"><span class="keyword">function</span>(<span class="params">fn , init</span>)</span>&#123;  <span class="comment">// 函数 初始值(可以不传)</span></span><br><span class="line">  <span class="keyword">let</span> result = init;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; <span class="keyword">this</span>.length ; i++ )&#123;</span><br><span class="line">    <span class="keyword">if</span>(i <span class="keyword">in</span> <span class="keyword">this</span>)&#123;</span><br><span class="line">      result = fn.call(<span class="literal">undefined</span> , result , <span class="keyword">this</span>[i] , i , <span class="keyword">this</span>) </span><br><span class="line">      <span class="comment">// 后四个参数  当前累计值，当前值，序列，该数组</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a  = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line">a.reduce( <span class="function">(<span class="params">result,currentValue,currentIndex,array</span>)=&gt;</span>&#123; <span class="keyword">return</span> result + currentValue &#125; , <span class="number">0</span> ) </span><br><span class="line"><span class="comment">//累加 10</span></span><br></pre></td></tr></table></figure>
<p>####8.总结</p>
<p><em>关于 map , filter , reduce之间的关系</em></p>
<p><strong>用reduce实现map</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line">array.map(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;<span class="keyword">return</span> item+<span class="number">1</span>&#125;);</span><br><span class="line">array.reduce(<span class="function">(<span class="params">result,item</span>)=&gt;</span>&#123;</span><br><span class="line">	result.push(item+<span class="number">1</span>)</span><br><span class="line">    <span class="keyword">return</span> result ; </span><br><span class="line">&#125;,[])<span class="comment">//result的初始值设置为 []</span></span><br></pre></td></tr></table></figure>
<p><strong>用reduce实现filter</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line">array.filter(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;<span class="keyword">return</span> item%<span class="number">2</span> === <span class="number">0</span>&#125;);</span><br><span class="line">array.reduce(<span class="function">(<span class="params">result,item</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(item%<span class="number">2</span> === <span class="number">0</span>)&#123;</span><br><span class="line">    result.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;,[])</span><br></pre></td></tr></table></figure>
<p><strong>结论，其实foreach,map,filter都是由reduce实现，reduce是最关键的。</strong></p>
<h2 id="2-underscore-js"><a href="#2-underscore-js" class="headerlink" title="2.underscore.js"></a>2.underscore.js</h2><h4 id="1-underscore是什么"><a href="#1-underscore是什么" class="headerlink" title="1.underscore是什么"></a>1.underscore是什么</h4><p>underscore是一个集合操作的库(数组和对象)</p>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="18e53f06.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          在 Vue Cli 3 中使用 px2rem
        
      </div>
    </a>
  
  
    <a href="f6d05227.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">JavaScript中的异步</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/b3afd273.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
